<template>
	<view class="box">
		<!-- 场次信息 -->
		<view class="box_info">
			<text>{{name}}</text>
			<view class="box_info_date">
				<image src="/static/icon/order_ic_date.png"></image>
				<text>{{date}}</text>
			</view>
			<view class="box_info_item" v-for="item,index in list" :key="index">
				<view class="box_info_item_a">
					<text>{{item.siteModelName}}</text>
					<text>{{item.beginTime}}-{{item.endTime}}</text>
				</view>
				<view class="box_info_item_b"><text>￥{{item.price}}</text></view>
			</view>
		</view>
		<view class="box_content">
			<view class="bt">预定人员</view>
			<view class="flex-cb liCnt">
				<view class="left">
					客户类型
				</view>
				<view style="flex: 1;" class="flex">
					<u-radio-group v-model="hklx" @change="onChange" direction="horizontal">
						<u-radio name="1" label="会员登记">会员登记</u-radio>
						<text style="width: 20rpx;display: inline-block;"></text>
						<u-radio name="2" label="散客登记">散客登记</u-radio>
					</u-radio-group>
				</view>
			</view>
			<block v-if="hklx == 2">
				<view class="flex-cb liCnt">
					<view class="left">
						手机号
					</view>
					<input type="number" v-model="shtel" placeholder="手机号可不填，默认姓名为散客" />
				</view>
				<view class="flex-cb liCnt">
					<view class="left">
						姓名
					</view>
					<input type="text" v-model="shname" placeholder="请输入姓名" />
				</view>
			</block>
			<block v-if="hklx == 1">
				<view class="flex-cb liCnt">
					<view class="left">
						手机号
					</view>
					<input type="number" v-model="hytel" placeholder="请输入手机号" @confirm="hyClick" />
					<u-icon name="search" size="38rpx" color="#4167C1" @click="hyClick"></u-icon>
				</view>
				<view class="flex-cb liCnt">
					<view class="left">
						姓名
					</view>
					<input disabled v-model="hyname" placeholder="根据手机号查询会员信息带出" />
					<view class="quan"></view>
				</view>
				<view class="flex-cb liCnt">
					<view class="left">
						会员卡号
					</view>
					<input disabled v-model="hyIdCard" placeholder="根据手机号查询会员信息带出" />
					<view class="quan"></view>
				</view>
			</block>
			<view class="flex-cb liCnt">
				<view class="left">
					备注
				</view>
				<input type="text" v-model="remarks" placeholder="请输入备注" />
			</view>
		</view>
		<!-- 订场须知 -->
		<view class="box_xz">
			<text>订场须知</text>
			<u-parse :content="dcxz"></u-parse>
		</view>
		<!-- 展位 -->
		<view class="seizeAseat"></view>
		<!-- 底部总金额+提交 -->
		<view class="box_active_footer">
			<view class="box_active_footer_money">
				<!-- <text>￥{{list.allPrice}}</text> {{paidIn}} {{yhprice}}-->
				<text>应付：<text class="reds">¥ {{allPrice}}</text></text>
			</view>
			<view class="box_active_footer_btn" @click="submit">立即预定</view>
		</view>
		<!-- 密码弹框 -->
		<u-popup mode="center" :show="show">
			<view class="pwd_box">
				<view class="pwd_box_title">支付密码</view>
				<view class="pwd_box_input">
					<input password type="text" placeholder="请输入支付密码" v-model="pwd" />
				</view>
				<view class="pwd_box_footer">
					<view class="pwd_box_footer_qx" @click="onClose">取消</view>
					<view class="pwd_box_footer_qd" @click="memberTJ">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getYMDHMS
	} from '@/utils/utils';
	export default {
		data() {
			return {
				id: '',
				price: '',
				date: '',
				list: [],
				hklx: '1',
				show: false,
				pwd: '',
				allPrice: 0,
				siteId: '',
				name: uni.getStorageSync('venueName'), //场馆名称
				shtel: '',
				shname: '',
				hytel: '',
				hyname: '',
				hyIdCard: '',
				hyid: '',
				remarks: ''
			};
		},
		onLoad(options) {
			this.siteId = options.siteId
			this.getDate()
			this.siteReserve()
			this.getYx()
		},
		methods: {
			getYx() {
				this.$app.ajax({
					data: {
						param: {
							type: '15',
							code: 'AGREEMENT_BOOKING_SITE'
						}
					},
					api: this.$api.paymentConfiguration()
				}).then((res) => {
					this.dcxz = res.recordList[0].value
				})
			},
			siteReserve() {
				this.$app.ajax({
					data: {
						param: {
							siteId: this.siteId
						}
					},
					api: this.$api.siteReserve()
				}).then((res) => {
					this.list = res.record.siteList
					this.id = res.record.id
					this.remarks = res.record.remarks
					this.hklx = res.record.userType == '1' ? '2' : '1'
					this.shtel = res.record.userPhone
					this.hytel = res.record.memberPhone
					this.hyname = res.record.memberName
					this.hyIdCard = res.record.number
					this.allPrice = res.record.allPrice
					this.hyid = res.record.memberId
					this.shname = res.record.userName
				})
			},
			// 关闭密码输入弹框
			onClose() {
				this.show = false
				this.pwd = ''
			},
			// 获取日期
			getDate() {
				let date = new Date();
				let nnn = date.getFullYear()
				let yyy = date.getMonth() + 1
				let rrr = date.getDate()
				let xq = date.getDay()
				let data = ''
				switch (xq) {
					case 1:
						data = '周一'
						break;
					case 2:
						data = '周二'
						break;
					case 3:
						data = '周三'
						break;
					case 4:
						data = '周四'
						break;
					case 5:
						data = '周五'
						break;
					case 6:
						data = '周六'
						break;
					case 0:
						data = '周日'
						break;
				}
				let res = nnn + '年' + yyy + '月' + rrr + '日' + ' ' + data
				this.date = res
			},
			// 会员提交订单
			memberTJ() {
				var that = this
				if (!that.data.pwd) return uni.showToast({
					title: '请输入支付密码',
					icon: 'none',
					duration: 2000
				})
				payment({
					userId: uni.getStorageSync('userId'),
					param: {
						memberId: uni.getStorageSync('userId'),
						orderId: that.data.ddId,
						payMethod: that.data.type,
						payPwd: that.data.pwd,
						couponsId: that.data.yhqId
					}
				}).then(res => {
					if (res.errorCode == '000000') {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000,
							mask: true,
							success(res) {
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/paymentSuccessful/index'
									})
								}, 2000)
							}
						})
					} else if (res.errorCode == '70012') {
						uni.showToast({
							title: res.errorMsg,
							icon: 'none',
							duration: 2000,
							success(res) {
								that.setData({
									pwd: ''
								})
							}
						})
					} else if (res.errorCode == '00027') {
						uni.showToast({
							title: res.errorMsg,
							icon: 'none',
							duration: 2000,
							success(res) {
								that.setData({
									pwd: '',
									show: false
								})
							}
						})
					} else {
						uni.showToast({
							title: res.errorMsg,
							icon: 'none',
							duration: 2000,
							success(res) {
								setTimeout(() => {
									uni.reLaunch({
										url: `/pages/paymentFailure/index?ddid=${that.data.ddId}&type=会员支付`
									})
								}, 2000)
							}
						})
					}
				})
			},

			// 提交订单
			submit() {
				var that = this
				if (this.hklx == '1') { //会员
					if (!this.hyid) return uni.showToast({
						title: '请先选择会员',
						icon: 'none',
						duration: 2000
					})
					this.$app.ajax({
						data: {
							param: {
								memberId: this.hyid,
								remarks: this.remarks,
								reserveId: this.id,
								type: 0,
								userName: '',
								userPhone: '',
								userType: 0
							}
						},
						api: this.$api.updateSiteReserve()
					}).then(res => {
						if (res.errorCode == '000000') {
							uni.showToast({
								title: '修改预定成功',
								icon: 'success',
								duration: 2000,
								mask: true,
								success(res) {
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
										})
									}, 1000)
								}
							})
						}
					})
				} else {
					if (!this.shname) return uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2000
					})
					this.$app.ajax({
						data: {
							param: {
								memberId: '',
								remarks: this.remarks,
								reserveId: this.id,
								type: 0,
								userName: this.shname,
								userPhone: this.shtel,
								userType: 1
							}
						},
						api: this.$api.updateSiteReserve()
					}).then(res => {
						if (res.errorCode == '000000') {
							uni.showToast({
								title: '修改预定成功',
								icon: 'success',
								duration: 2000,
								mask: true,
								success(res) {
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
										})
									}, 1000)
								}
							})
						}
					})
				}
			},
			hyClick() {
				if (!this.hytel) return uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 2000
				})
				this.$app.ajax({
					data: {
						param: {
							phoneOrNo: this.hytel
						}
					},
					api: this.$api.VIPInfo()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.hyname = res.record.nickName
						this.hyIdCard = res.record.number
						this.hyid = res.record.id
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onChange(e) {
				this.hklx = e
			},
		}
	};
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.box_time {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FDF5F4;
	}

	.box_time image {
		width: 36rpx;
		height: 36rpx;
	}

	.box_time text {
		font-size: 26rpx;
		font-weight: 500;
		color: #4167C1;
		margin-left: 16rpx;
	}

	.box_info {
		background: #ffffff;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.box_info text:nth-child(1) {
		font-size: 30rpx;
		font-weight: 600;
		color: #222222;
	}

	.box_info_date {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.box_info_date text {
		font-size: 26rpx;
		font-weight: 400;
		color: #4167C1;
	}

	.box_info_date image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 12rpx;
	}

	.box_info_item {
		padding: 30rpx;
		border-radius: 10rpx;
		background: #F7F7F7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.box_info_item_a text:nth-child(1) {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
	}

	.box_info_item_a text:nth-child(2) {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		margin-left: 30rpx;
	}

	.box_info_item_b text {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
	}

	.box_mode {
		background: #ffffff;
		padding: 30rpx 30rpx 0rpx 30rpx;
		margin-top: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.box_mode_title text {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
	}

	.box_mode_s {
		padding: 34rpx 0;
		display: flex;
		border-bottom: 1px solid #E5E5E5;
		justify-content: space-between;
	}

	.box_mode .box_mode_s:last-child {
		border: none !important;
	}

	.weui-cell__bd {
		display: flex;
	}

	.weui-cell__bd image {
		width: 40rpx;
		height: 40rpx;
	}

	.weui-cell__bd text:nth-child(2) {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 24rpx;
	}

	.weui-cell__bd text:nth-child(3) {
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		margin-left: 24rpx;
	}

	.red {
		color: #DD5040;
	}

	.box_xz {
		padding: 30rpx;
		margin-top: 24rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
	}

	.box_xz text:nth-child(1) {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
		margin-bottom: 24rpx;
	}

	.box_xz text {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 15rpx;
	}

	.seizeAseat {
		height: 120rpx;
	}

	.my-icon {
		margin-right: 10rpx;
	}

	.time_js {
		margin-top: 5rpx;
	}

	.u-count-down {
		color: #DD5040 !important;
		font-size: 26rpx !important;
	}

	.pwd_box {
		padding: 30rpx 0 0 0;
		box-sizing: border-box;
		border-radius: 20rpx;
		width: 600rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pwd_box_title {
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		margin-top: 15rpx;
	}

	.pwd_box_input {
		width: 90%;
		height: 90rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #ececec;
		margin-top: 40rpx;
	}

	.pwd_box_input input {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.pwd_box_footer {
		display: flex;
		width: 100%;
		height: 100rpx;
		margin-top: 40rpx;
		border-top: 1rpx solid #ececec;
	}

	.pwd_box_footer_qx {
		flex: 1;
		height: 100%;
		font-size: 29rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1rpx solid #ececec;
	}

	.pwd_box_footer_qd {
		flex: 1;
		color: #DD5040;
		font-size: 29rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.reds {
		font-size: 32rpx !important;
		font-weight: 600 !important;
		color: #DD5040 !important;
		margin-left: 0 !important;
	}

	.u-radio-group--horizontal {
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 auto;
	}

	.box_content {
		background: #ffffff;
		padding: 30rpx 0 0;
		margin-top: 30rpx;
	}

	.box_content .bt {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
		margin-bottom: 24rpx;
		padding-left: 30rpx;
	}

	.custom-icon {
		color: #4167C1;
	}

	.top .date {
		line-height: 53rpx;
		height: 55rpx;
		background: #F7F7F7;
		text-align: center;
		border-radius: 28px;
		font-size: 26rpx;
		width: 200rpx;
		display: inline-block;
		border: 1px solid #EEEEEE;
	}

	.top .date.hui {
		color: #B2B2B2;
	}

	.gd {
		margin: 0 20rpx;
	}

	.checkList {
		width: 80%;
		margin: 0 10%;
		display: flex;
		flex-wrap: wrap;

		.value-class {
			width: 50%;
			margin-top: 20rpx;
			display: inline-block;
		}
	}

	.liCnt {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F7F7F7;
		position: relative;

		.left {
			width: 5em;
			flex: none;
		}

		.quan {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		input {
			font-size: 28rpx;
			flex: 1;
			background: none;
		}
	}

	.box_active_footer {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		right: 0;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		align-items: center;
		background: #ffffff;
	}

	.box_active_footer_money {
		display: flex;
		align-items: end;
		justify-content: center;
		flex-direction: column;
	}

	.box_active_footer_money text {
		font-size: 32rpx;
		font-weight: 600;
		color: #DD5040;
	}

	.box_active_footer_money text:nth-child(1) {
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
	}

	.box_active_footer_money text:nth-child(2) {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin-top: 16rpx;
	}


	.box_active_footer_btn {
		width: 185rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		background: #4167C1;
		border-radius: 34rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>